<template>
    <div><FolderOpenOutlined /> {{ item.picTypeCname }}</div>
    <div v-if="item.picTypeCode == selectedKeys[0]" style="width: 40px">
        <EditOutlined @click.stop="editFun" />
        <DeleteOutlined @click.stop="delFun" />
    </div>
    <div v-else style="width: 40px">{{ item.size }}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

import {
    FundOutlined,
    VerticalAlignBottomOutlined,
    FolderOpenOutlined,
    EditOutlined,
    DeleteOutlined,
} from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';

export default defineComponent({
    name: 'roleModel',
    components: { FundOutlined, VerticalAlignBottomOutlined, FolderOpenOutlined, EditOutlined, DeleteOutlined },
    props: {
        item: {
            type: Object,
            default: () => {},
        },
        selectedKeys: {
            type: Array,
            default: () => [],
        },
    },

    setup(props, { emit }) {
        const { t } = useI18n();
        const editFun = () => {
            emit('edit');
        };
        const delFun = () => {
            emit('del');
        };

        return {
            t,
            editFun,
            delFun,
        };
    },
});
</script>
<style lang="scss" scoped>
.dept-model {
    @include flexWrap;
    width: 100%;
    .ant-form-item {
        @include flex;
        width: 50%;
        margin-right: 0;
        padding-right: $width10;
        margin-bottom: $width8;
        :deep .ant-form-item-label {
            flex-basis: $formLabel;
        }
        :deep .ant-form-item-control-wrapper {
            flex: 1;
        }
        :deep .ant-form-item-children,
        :deep .ant-input-number {
            width: 100%;
        }
        &.full-width {
            width: 100%;
        }
    }
}
</style>
